<!--首页搜索-->
<template>
	<div class="index-wrap">
		<slot></slot>
		<!-- 遮罩层 -->
		<transition name="fade" mode="out-in">
			<div class="password" v-show="trigger" :class="{ 'mask': trigger }" @click.stop="sliderFlase()"></div>
		</transition>
		<!-- 侧边栏 -->
		<transition name="slideRight" mode="out-in">
			<div class="pwd-warp" v-show="trigger">
				<slider-cont></slider-cont>
			</div>
		</transition>
		<!-- 设置密码按钮 -->
		<div class="set-pwd">
			<a href="javascript:;" @click="sliderPwd">
				<Icon type="gear-a" size="42"></Icon>
			</a>
			<span>设置密码</span>
		</div>
	</div>
</template>

<script>
import sliderCont from './slider'
export default {
	components: {
		sliderCont
	},
	data() {
		return {
			searchBtnMsg: '查询',
			trigger: false
		}
	},
	computed: {
		screen() {
			return this.$store.state.screenWidth
		}
	},
	created() {
		// 查询按钮文字
		this.btnText(this.screen)
	},
	methods: {
		// 设置按钮文字
		btnText(screen) {
			if (screen > 525) {
				this.searchBtnMsg = '查询'
			} else {
				this.searchBtnMsg = ''
			}
		},
		// 设置按钮
		sliderPwd() {
			this.trigger = !this.trigger
		},
		sliderFlase() {
			this.trigger = false
		}
	}
}
</script>

<style lang="less" scoped>
.position(@top, @right, @bottom, @left) {
	top: @top;
	right: @right;
	bottom: @bottom;
	left: @left;
}

.index-wrap {
	padding: 0 15px;
}

// 右侧滑块password
.password {
	position: absolute;
	background-color: rgba(0, 0, 0, .5);
	z-index: 100;
}

// 遮罩
.mask {
	.size(100%, 100%);
	.position(0, 0, 0, 0);
}

.pwd-warp {
	.size(300px, 500px);
	background-color: rgba(255, 255, 255, 1);
	position: absolute;
	top: 0px;
	right: 0px;
	min-height: 100%;
	min-width: 360px;
	z-index: 101;

	@media (max-width:700px) {
		top: 0;
		right: 0;
		min-width: 70%;
	}
}

// 两种class
.set-pwd {
	position: absolute;
	min-width: 100px;
	right: 15px;
	bottom: 2rem;

	@media (max-width:525px) {
		top: 2rem;
		bottom: auto;
	}

	a,
	span {
		display: block;
		text-align: center;
	}
}
</style>
